<template>
  <div class="content">
    <dc-header
      @submit="saveEdite"
      :page-to="''"
      :icon="'icon-header-back'"
      :title="'原料成本计算方式'"
      :action-title="'保存'"
    ></dc-header>
    <div class="head-top">
      <div v-for="option in options">
        <mt-cell class="mt20">
          <span slot="icon" @click="chooseThis(option)">
            <label class="mint-radiolist-label p-fix">
              <span class="mint-radio is-right">
                <input type="radio" class="mint-radio-input" v-model="value" :value="option.value" name="mode">
                <span class="mint-radio-core"></span></span>
              <span class="mint-radio-label m-fix">{{option.label}}</span>
            </label>
          </span>
        </mt-cell>
        <mt-cell class="bg-gray" title="菜品平均毛利率" v-if="value == option.value && value === 2">
          <span class="right-link">
            <input class="input-fix mr10" type="number" v-model="percent" placeholder="请输入百分比"/>%
          </span>
        </mt-cell>
        <div class="textabovefrom gray" v-if="value == option.value && value === 2">
          系统会根据平均毛利率和营业额情况按日计算菜品成本
        </div>
        <mt-cell class="bg-gray" title="请根据具体采购情况手动记账" v-if="value == option.value && value === 3">
          <span class="right-link">
            <router-link :to="form === 1 ? '/simAccountTool':'/keepAccounts'">
              <mt-button class="btn-fix" type="primary" size="small">记一笔</mt-button>
            </router-link>
          </span>
        </mt-cell>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import api from '@/common/api/account';
  import mintUi from '@/common/mintUi';
  export default {
    data () {
      return {
        value: 3,
        form: 1,
        options: [],
        percent: ''
      };
    },
    components: {
      'dc-header': header
    },
    methods: {
      chooseThis (o) {
        this.value = o.value;
      },
      saveEdite () {
        if (!(this.value === 2 && this.percent === '')) {
          api.updateAccountCosting({costingMode: this.value, profitRate: this.percent}).then(res => {
            mintUi.openToast('保存成功！');
            this.$router.push({path: '/accountSet/' + this.backType});
          });
        } else if (this.value === 2 && this.percent === '') {
          mintUi.openToast('请输入菜品平均毛利率！');
        }
        ;
      }
    },
    created () {
      if (this.$route.params.type) {
        this.value = parseInt(this.$route.params.type);
        this.percent = parseInt(this.$route.params.percent);
        this.form = parseInt(this.$route.params.form);
        this.backType = parseInt(this.$route.params.code);  //是从首页记账进入的还是从我的记账设置进入，1表首页，2表我的
      };
      this.options = [
        {
          label: '按菜品毛利估算',
          value: 2
        },
        {
          label: '手动记账',
          value: 3
        }
      ];
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .p-fix {
    padding: 0;
  }

  .m-fix {
    margin-left: 0;
  }

  .bg-gray {
    background-color: #fafafa;
  }

  .gray {
    color: #999;
  }

  .btn-fix {
    height: px2rem(50px);
    font-size: px2rem(26px);
  }

  .input-fix {
    border: none;
    background-color: transparent;
    outline: none;
    text-align: right;
    font-size: px2rem(30px);
  }

  .mr10 {
    margin-right: px2rem(10px);
  }
</style>
